import { useState } from "react";
import { View, ScrollView } from "react-native";
import { SegmentedButtons, IconButton } from "react-native-paper";

import Logger from "@/pages/VideoDisplay/DrawerLayoutContent/Logger";
import DeviceInfo from "@/pages/VideoDisplay/DrawerLayoutContent/DeviceInfo";
import ScheduleInfo from "@/pages/VideoDisplay/DrawerLayoutContent/ScheduleInfo";
import MaterialInfo from "@/pages/VideoDisplay/DrawerLayoutContent/MaterialInfo";
import NetworkDiagnosis from "@/pages/VideoDisplay/DrawerLayoutContent/NetworkDiagnosis";
import OldAppData from "@/pages/VideoDisplay/DrawerLayoutContent/OldAppData";

import SqliteTest from "@/pages/Test/SqliteTest";
import WebScoketTest from "@/pages/Test/WebScoketTest";
import SystemTest from "@/pages/Test/SystemTest";

import { btnList } from "@/pages/VideoDisplay/DrawerLayoutContent/const";
import styles from "./styles";
import config from "@/config";

export type Props = {
  /** 关闭 Drawer */
  close: () => void;
};

// 抽屉内容
const DrawerLayoutContent = (props: Props) => {
  const [value, setValue] = useState("3");

  const CompMap: Record<string, JSX.Element> = {
    /** 设备信息 */
    "0": <DeviceInfo />,
    /** 排期信息 */
    "1": <ScheduleInfo />,
    /** 素材信息 */
    "2": <MaterialInfo />,
    /** 日志信息 */
    "3": <Logger />,
    /** 网络信息 */
    "4": <NetworkDiagnosis />,
    /** 系统测试 */
    "7": <SystemTest />,
    /** 旧版APP数据 */
    "8": <OldAppData />
  };

  if (config.IS_DEBUG) {
    /** websocket 信息 */
    CompMap["5"] = <WebScoketTest />;
    /** sqlite测试 */
    CompMap["6"] = <SqliteTest />;
  }

  // 获取当前显示的组件
  const Comp = CompMap[value] ? CompMap[value] : null;

  return (
    <View style={styles.drawContainer}>
      {/* 横向按钮 */}
      <View style={styles.btnContainer}>
        <ScrollView horizontal>
          <SegmentedButtons density="small" value={value} onValueChange={setValue} buttons={btnList} />
        </ScrollView>
      </View>

      {/* 内容展示 */}
      <View style={styles.infoContainer}>{Comp}</View>

      {/* 关闭按钮 */}
      <IconButton icon="close-thick" style={styles.closeBtn} iconColor="black" size={36} onPress={props.close} />
    </View>
  );
};

export default DrawerLayoutContent;
